Java Layouts
- PP Modeless Child Wins
- PP Commanders
- PP TextEdit
- PP Documents
- Java Break
- Java Break 2
- Java Popup
- Blinking Letters
- Blinking Letters 2
- Java Grids
- Java Events
- Java FAQ
- Java Intro
- May 96 Factory Floor
- Javascript Intro
- Jul 96 Crabbs Apple
- Java IDE Review
- Java Components
- Java IDE Olympics
- Java Net Classes
Volume Number: 12
Issue Number: 10
Column Tag: Getting Started
Java Layouts and Panels 
By Dave Mark
Note: Source code files accompanying article are located on MacTech CD-ROM orsource code disks.
Last month, we explored Peter Lewis’ CWBlink rewrite, which introduced a host of
new Java concepts. This month, we’ll start exploring those concepts, starting off with
Java Layouts and Panels.
Layouts
In our first few applets, when we wanted to add elements to our main applet
frame, we simply added each element directly to the frame, trusting the default applet
setup to place things in the applet window in a way that makes sense. This is fine if all
you want to do is slap together an interface and you don’t particularly care how it
looks.
Being Mac programmers, though, we are all used to a certain way of laying out an
interface. You use ResEdit, or Resorcerer, or even a direct toolbox call, and specify
the exact pixel location for each interface element. Unfortunately, the Windows and
Unix worlds look very different from the Mac world. While all Macs feature square
pixels, and a window looks the same no matter what Mac it’s displayed on, Windows and
Unix boxes don’t share this consistency.
Since Java is a cross-platform language, Sun needed to come up with a way to
represent the interface elements so they would look decent, no matter what machine
they appeared on. The solution was a series of layout classes. You use the setLayout()
call to attach a layout to a container. The elements in the container are added to the
layout depending on the nature of each layout class. This series of example applets
should make the value of layouts clear.
Example One: NoLayout.µ
Create a new Java applet project called noLayout.µ. Create a new source file
named noLayout.java and add it to the project:
import java.awt.*;
public class noLayout extends java.applet.Applet
{
public noLayout()
{
add( new Label( “Enter your name:” ) );
add( new TextField( “”, 30 ) );
add( new Button( “Eeny” ) );
add( new Button( “Meeny” ) );
add( new Button( “Miney-Moe” ) );
}
}
Next, create a second source file called noLayout.html and add it to the project:
codebase=”noLayout ”
code=”noLayout.class”
width=530 height=100>
Make the project; then drag the .html file onto the Applet runner (if you are
using CodeWarrior, the applet runner is called Metrowerks Java). Figure 1 shows the
noLayout applet as it first appears. Notice that all the elements appear in a single row,
in the order in which they were added to the default container.
Figure 1. The noLayout applet before resizing
Figure 2 shows what happens when we shrink the window slightly. Notice that
the interface elements have “wrapped” to fit comfortably in the new, resized window.
Though it is not at all obvious, you are seeing the default layout at work. This default
layout is called FlowLayout (see java.awt.FlowLayout.html). You don’t need to create a
FlowLayout object for your containing frame. One is created for you. When you call
add(), you are adding to a FlowLayout.
Figure 2. The noLayout applet after resizing
FlowLayout treats your elements like words in a word processor. FlowLayout
features three constructors. FlowLayout() with no parameters centers all its
elements. FlowLayout( int ) takes a single parameter, one of CENTER, LEFT, or RIGHT,
which specifies how this FlowLayout should align its elements. Finally, FlowLayout(
int align, int hgap, int vgap ) takes three parameters. The first is either CENTER,
LEFT, or RIGHT, the second specifies the horizontal minimum gap between elements,
and the third specifies the vertical minimum gap between elements.
For the moment, just remember that FlowLayout is the default layout.
Example Two: LayoutNoPanel.µ
Our second example creates a simple, though not particularly useful, layout.
Create a new Java applet project called layoutNoPanel.µ. Create a new source file
named layoutNoPanel.java and add it to the project:
import java.awt.*;
public class layoutNoPanel extends java.applet.Applet
{
public layoutNoPanel()
{
setLayout( new BorderLayout() );
add( “North”, new Label( “Enter your name:” ) );
add( “Center”,
new TextField(“”, 30) );
add( “South”, new Button( “Eeny” ) );
add( “East”, new Button( “Meeny” ) );
add( “West”, new Button( “Miney-Moe” ) );
}
}
Next, create a second source file called layoutNoPanel.html and add it to the
project:
codebase=”layoutNoPanel ”
code=”layoutNoPanel.class”
width=530 height=100>
Make the project, then drag the .html file onto the Applet runner. Figure 3
shows the layoutNoPanel applet as it first appears. If you take a look at the source
code, you’ll see that a new BorderLayout object is created and made the current layout
using setLayout(). The BorderLayout lets you assign items to the top, bottom, left,
right, and center using the add() parameters “North”, “South”, “West”, “East”, and
“Center”. To learn more about the BorderLayout class and the various constructors
you can use to build one, check out java.awt.BorderLayout.html.
Figure 3. The layoutNoPanel applet before resizing
Figure 4 shows what happens when we shrink the window slightly. Notice that
the interface elements have all shrunk accordingly. As I said, this wasn’t particularly
useful, but it shows an important concept - how to use a layout in your applet code.
Figure 4. The layoutNoPanel applet after resizing
Before proceeding to the last example, see if you can figure out a way to use the
FlowLayout and BorderLayout to organize these components into a more useful form
Here’s a hint. You’ll want to take advantage of Panels.
Example Three: LayoutWithPanel.µ
Our third example introduces the concept of Panels. Before you examine the code,
take a look at java.awt.Panel.html. Think of a Panel as a visual grouping mechanism.
The default layout for a Panel is the FlowLayout. We’re going to create a pair of
Panels, one to hold the Label and TextField, and the other to hold the three buttons.
Create a new Java applet project called layoutWithPanel.µ. Create a new source
file named layoutWithPanel.java and add it to the project:
import java.awt.*;
public class layoutWithPanel
extends java.applet.Applet
{
public layoutWithPanel()
{
setLayout( new BorderLayout() );
Panel top = new Panel();
Panel bottom = new Panel();
top.setLayout( new FlowLayout() );
top.add( new Label( “Enter your name:” ) );
top.add( new TextField( “”, 30 ) );
bottom.setLayout( new FlowLayout() );
bottom.add( new Button( “Eeny” ) );
bottom.add( new Button( “Meeny” ) );
bottom.add( new Button( “Miney-Moe” ) );
add( “Center”, top );
add( “South”, bottom );
}
}
Next, create a second source file called layoutWithPanel.html and add it to the
project:
codebase=”layoutWithPanel ”
code=”layoutWithPanel.class”
width=530 height=100>
Make the project, then drag the .html file onto the Applet runner. Figure 5
shows the layoutWithPanel applet as it first appears. Notice that the Label and
TextField stick together, and the three buttons stick together.
The source code starts off by creating a BorderLayout. We then create two Panels
and add one to the layout as “Center” (the Label and TextField) and one to the layout as
“South” (the three buttons).
Figure 5. The layoutWithPanel applet before resizing
Figure 6 shows what happens when we shrink the window slightly. Notice that
the TextField wraps to the next line without affecting the three buttons. This is the
value of combining Panels with Layouts.
Figure 6. The layoutWithPanel applet after resizing
Till Next Month...
So far, you’ve seen two Layouts - the FlowLayout and the BorderLayout. In next
month’s column, we’ll take a look at the remaining Layout classes: GridLayout,
GridBagLayout, and CardLayout.
Before we go, I’d like to address a question I get asked all the time: What is the
best Java book to buy? Tough question. There’s no simple answer, but I’ll take a shot
at it.
I’ve read most of the major Java books. In general, there’s something to like and
dislike about every one. Some books offer a really nice writing style, but suffer from
buggy or inaccurate code. A good solution is to buy at least two Java books, so you can
do a reality check when one book skimps on a topic or contains a bug that perhaps is
properly presented in the other.
Though I usually avoid pushing my own books, I would be doing Barry Boone a
disservice if I didn’t mention Learn Java on the Macintosh. Though my name tags along
on the cover of the book, this is definitely Barry’s baby, and a good introduction to
Java. It is also the only Java book that comes with CodeWarrior Lite for Java. I also
like Teach Yourself Java In 21 Days by Lemay and Perkins, Java in a Nutshell by
Flanagan, and Java Programming Language Handbook by Friedel and Potts.
You could probably get good results with any of these books. Once you get your
brain around Java, you should check out The Java Series from Addison-Wesley and
Sun. The Java Programming Language is from Ken Arnold and James Gosling. Ken
Arnold is a well known C author and, of course, James Gosling created Java. To me,
this is sort of like having Kernighan and Ritchie (or, to be more up-to-date, Harbison
and Steele) on your C bookshelf.
That being said, there are so many Java books coming out all the time that you
should really go down to the bookstore and flip through some of the newer titles and see
if any of them strike your fancy. In the meantime, be sure to check out the various
Java tutorials on the Web.